// 关键对象：
// Ext.data.HttpProxy 创建访问服务端的代理
// Ext.data.Store 数据存储器
// Ext.grid.ColumnModel gridPanel呈现时，显示的列集合
// Ext.PagingToolbar gridPanel分页
// Ext.grid.GridPanel 数据呈现
/** ******************自动行号******************* */
var rownumber = new Ext.grid.RowNumberer();

/** ******************每页显示数量******************* */
var gridPageSize = 10;

/** ******************主页面******************* */
var nav = null;

/** ******************查询过滤******************* */
var filter = {
	filters : new Array(),
	getSearchExpressions : function() {
		var expressions = new Array();
		// 遍历表单设置查询项
		var form = document.forms[0];
		for (var i = 0; i < form.length; i++) {
			var element = form[i];
			if (element != '' && element != null && element.value != ""
					&& element.value != null) {
				// 再过滤一下查询项
				if (element.name == "name"
						|| element.name == "phoneNumber") {
					expressions.push({
								queryname : element.name,
								queryvalue : element.value
							});
				} 

			}
		}
		filter.filters = expressions;
	},
	setFilter : function(proxy, params) {
		filter.getSearchExpressions();
		params.args = [filter.filters];
	}
}
/** ******************数据 需要引入 dwrproxy.js******************* */
var store_19 = function() {
	var proxy = new Ext.data.DWRProxy(smsService.getList, true);
	proxy.on('beforeload', function(proxy, params) {
				filter.setFilter(proxy, params)
			}, this);
	// 列准备
	var listType = Ext.data.Record.create([{
				name : "id",
				mapping : "id",
				type : "string"
			}, {
				name : "phoneNumber",
				mapping : "phoneNumber",
				type : "string"
			}, {
				name : "message",
				mapping : "message",
				type : "string"
			}, {
				name : "name",
				mapping : "name",
				type : "string"
			}, {
				name : "state",
				mapping : "state",
				type : "string"
			}, {
				name : "createdTime",
				mapping : "createdTime",
				type : "string"
			}]);
	var ds = new Ext.data.Store({
				proxy : proxy,
				reader : new Ext.data.ListRangeReader({
							id : 'id',
							root : "data",
							totalProperty : 'totalSize'
						}, listType),
				// true为后台排序，如果是false只在前台获取的数据排序
				remoteSort : true
			})
	ds.setDefaultSort("createdTime", "desc");

	return {
		getStore : function() {
			return ds;
		}
	}
}
var store = new store_19();
var ds = store.getStore();
/** ******************按钮函数******************* */
var buttonAction = {
	search : function() {
		ds.load({
					params : {
						start : 0,
						limit : gridPageSize
					}
				});
	},
	reset : function() {
		nav.form.reset();
	}
}
/** ******************列表******************* */
var list_19 = function() {

	var columnModel = new Ext.grid.ColumnModel([rownumber, {
				header : '姓名',
				align : 'center',
				width : 150,
				// 是否点击排序
				sortable : true,
				dataIndex : 'name'
			},{
				header : '电话号码',
				align : 'center',
				width : 150,
				// 是否点击排序
				sortable : true,
				dataIndex : 'phoneNumber'
			},{
				header : '发送时间',
				align : 'center',
				width : 150,
				// 是否点击排序
				sortable : true,
				dataIndex : 'createdTime'
			},{
				header : '短信内容',
				align : 'center',
				width : 500,
				// 是否点击排序
				sortable : true,
				dataIndex : 'message'
			},{
				header : '状态',
				align : 'center',
				width : 60,
				// 是否点击排序
				sortable : true,
				dataIndex : 'state'
			}]);
	columnModel.defaultSortable = true;

	return {
		getColumnModel : function() {
			return columnModel;
		}
	}
}
var list = new list_19();
var cm = list.getColumnModel();
/** ******************Panel******************* */
var panel_19 = function() {
	var listgrid = new Ext.grid.GridPanel({
				store : ds,
				cm : cm,
				height : '310',
				bodyStyle : 'width:100%',
				stripeRows : true,
				border : false,
				loadMask : {
					msg : '数据载入中...'
				},
				tbar : new Ext.PagingToolbar({
							pageSize : gridPageSize,
							store : ds,
							displayInfo : true,
							displayMsg : '交易列表 {0} - {1} 共 {2} 条',
							emptyMsg : "没有记录",
							firstText : "首页",
							lastText : "末页",
							nextText : "下一页",
							prevText : "上一页",
							refreshText : "刷新",
							afterPageText : '页  共{0}页',
							beforePageText : '第'
						}),
				bbar : new Ext.PagingToolbar({
							pageSize : gridPageSize,
							store : ds,
							displayInfo : true,
							displayMsg : '交易列表 {0} - {1} 共 {2} 条',
							emptyMsg : "没有记录",
							firstText : "首页",
							lastText : "末页",
							nextText : "下一页",
							prevText : "上一页",
							refreshText : "刷新",
							afterPageText : '页  共{0}页',
							beforePageText : '第'
						})
			});

	var mainPanel = new Ext.Panel({
				collapsible : true,
				title : '已发送短信列表',
				items : [listgrid]
			});
	return {
		getPanel : function() {
			return mainPanel;
		}
	}
}
var panel = new panel_19();
var mainPanel = panel.getPanel();
/** ******************查询表单******************* */
var form_19 = {

	// 第一行表单
	items1 : { // 行1
		layout : "column", // 从左往右的布局
		items : [{
					columnWidth : .3,
					layout : "form",
					items : [{
								xtype : "textfield",
								fieldLabel : "姓名",
								name : 'name',
								width : 150
							}]
				},{
					columnWidth : .3,
					layout : "form",
					items : [{
								xtype : "textfield",
								fieldLabel : "电话号码",
								name : 'phoneNumber',
								width : 150
							}]
				}]
	},

	// 按钮
	button : {
		bodyStyle : 'padding:0px',
		buttonAlign : 'center',
		buttons : [{
					text : '开始查询',
					handler : function() {
						buttonAction.search();
					}
				}, {
					text : '清空查询项',
					handler : function() {
						buttonAction.reset();
					}
				}]

	}

}
Ext.onReady(function() {
			// 主页面
			nav = new Ext.form.FormPanel({
						title : '短信列表',
						frame : true,
						border : true,
						autoScroll : true,
						x : 0,
						y : 0,
						renderTo : Ext.getBody(),
						items : [form_19.items1, form_19.button, mainPanel]
					});

			// 第一次刷新数据
			var viewport = new Ext.Viewport({
						layout : 'fit',
						items : nav
					});
			buttonAction.search();
		});
